<template>
  <div>
    <crumb />
    <div class="main-contianer3 caseManage">
      <div class="top-content">
        <div class="caseManage-top">
          <div class="left-title flex-row">
            <span class="title-text">{{ loginInfo.resourceLessonName }}</span>
            <span class="change-text" @click="showSelectCourseBox()">更换课程</span>
          </div>
          <el-radio-group v-model="tabId" @change="changeTab">
            <el-radio-button :label="1" border>案例分析</el-radio-button>
            <el-radio-button :label="2" border>互动实训</el-radio-button>
          </el-radio-group>
        </div>
        <el-table :data="caseList" border style="width: 100%">
          <el-table-column align="center" prop="resourceCaseName" label="案例名称">
          </el-table-column>
          <el-table-column align="center" prop="finishedRate" label="完成进度" width="100"></el-table-column>
          <el-table-column align="center" prop="finishedRateContent" label="完成度明细" width="100">
          </el-table-column>
          <el-table-column align="center" prop="unScoreNum" label="未评分数量" width="100">
          </el-table-column>
          <el-table-column align="center" label="操作" width="100">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="handleView(scope.row.resourceCaseId)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
     </div>
    <SelectCourseBox ref="SelectCourseBox" @changeCourse="changeCourse" />
  </div>
</template>

<script>
import { manageIndex } from '@/api/teacher/manage/casemanage'
import { mapGetters } from 'vuex'
import SelectCourseBox from '@/components/SelectCourseBox'
export default {
  name: 'caseManage',
  data () {
    return {
      tabId: 1,
      caseList: []
    }
  },
  components: {
    SelectCourseBox
  },
  mounted () {
    this.manageIndex()
  },
  methods: {
    async manageIndex () {
      const res = await manageIndex()
      if (res.code === '200') {
        this.caseList = res.data.caseList
      } else {
        this.$message.error(res.message)
      }
    },
    handleView (id) {
      this.$router.push({
        name: 'caseManageView',
        query: {
          id
        }
      })
    },
    changeTab (tab) {
      this.tabId = tab
      if (tab === 2) {
        this.$router.push('interactionManage')
      }
    },
    showSelectCourseBox () {
      this.$refs.SelectCourseBox.changeShow(true)
    },
    changeCourse (data) {
      this.manageIndex()
    }
  },
  computed: {
    ...mapGetters([
      'loginInfo'
    ])
  }
}
</script>
<style scoped lang="scss" rel="stylesheet/scss">
  .left-title {
    .title-text {
      padding: 0 10px;
      font-size: 18px;
      font-weight: bold;
      color: rgba(16, 29, 55, 1);
    }
    .change-text {
      font-size: 14px;
      font-weight: 500;
      color: rgba(0, 156, 246, 1);
      cursor: pointer;
    }
  }
.caseManage {
  .top-content {
    width: 100%;
    background: #fff;
    .caseManage-top{
      display: flex;
      justify-content: space-between;
      padding: 20px 10px;
      width: 100%;
    }
  }
}
</style>
